<template>
  <div class="data-item-wrap" v-loading="loading">
    <el-button class="refresh-btn" type="text" icon="el-icon-refresh" @click.stop="refreshData">刷新</el-button>
    <p class="item-title">{{ title }}</p>
    <div class="data-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DataItemWrap',
  props: {
    title: String,
    refreshFn: {
      type: Function
    }
  },
  data() {
    return {
      loading: false
    }
  },
  methods: {
    refreshData() {
      this.loading = true
      if (this.refreshFn && typeof this.refreshFn === 'function') {
        this.refreshFn().finally(() => {
          this.loading = false
        })
      }
      /* setTimeout(() => {
        this.$emit('refresh')
        this.loading = false
      }, 1500) */
    }
  }
}
</script>

<style lang="scss">
.data-item-wrap {
  position: relative;
  width: 25vw;
  height: 25vh;
  background: url(~@/assets/img/monitor/itemBg.png) 50% no-repeat;
  background-size: 100% 100%;
  .el-loading-mask {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
  }
  &:hover {
    .refresh-btn {
      display: block;
    }
  }
  .item-title {
    font-size: 1vw;
    margin-top: 34px;
    font-weight: bold;
    color: #00aeff;
    text-align: center;
    text-shadow: 0 0 0.2vw #00aeff;
  }
  .refresh-btn {
    position: absolute;
    right: 3vw;
    top: 2.8vh;
    color: #fff;
    text-shadow: 0 0 1px #fff;
    display: none;
  }
}
</style>
